<template>
  <div id="Zone" v-loading="loading">
    <v-tableTitle
      :btnConfig="btnConfig"
      :tableSelectData="tableSelectData"
      :title="$t('config.putZone')"
      @del="del"
      @exportFile="exportFile"
      @handleDownErrorFile="exceptionFileUrl"
      @handleDownTemplate="downloadExcelFile"
      @newCreate="newCreate"
    ></v-tableTitle>
    <v-table
      :pageSize="pageSize"
      :page="page"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :total="total"
      @findData="getTableData"
      @getTableData="getTableData"
      @searhData="searhData"
      @selectData="selectData"
      @setdialog="setdialog"
      @upData="getTableData"
      ref="table"
    ></v-table>
    <el-dialog
      :modal="false"
      :visible.sync="dialogFlag"
      title=""
      top="0"
      v-dialogDrag
      :close-on-click-modal="false"
      width="900px"
    >
      <router-view></router-view>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import tableTitle from "commons/TableTitle";
import table from "commons/Table";
import baseMixin from "@/mixins/BaseMixin";
import config from "./Config";

export default {
    name: "zone",
    mixins: [baseMixin, config],
    data() {
        return {
            loading: false,
            tableConfig: [
                {
                    label: this.$t('config.area'),
                    prop: "putawayzone",
                    input: "input",
                },
                {
                    label: this.$t('common.desc'),
                    prop: "descr",
                    input: "input"
                },
                {
                    label: this.$t('outbound.uom3pickmethod'),
                    prop: "uom3pickmethod",
                    input: "select",
                    options: this.getOptions('querycodeLkup/PICKMETHOD')
                },
                {
                    label: this.$t('outbound.uom2pickmethod'),
                    prop: "uom2pickmethod",
                    input: "select",
                    options: this.getOptions('querycodeLkup/PICKMETHOD')
                },
                {
                    label: this.$t('outbound.uom1pickmethod'),
                    prop: "uom1pickmethod",
                    input: "select",
                    options: this.getOptions('querycodeLkup/PICKMETHOD')
                },
                {
                    label: this.$t('outbound.uom4pickmethod'),
                    prop: "uom4pickmethod",
                    input: "select",
                    options: this.getOptions('querycodeLkup/PICKMETHOD')
                },
                {
                    label: this.$t('outbound.posvermethod'),
                    prop: "posvermethod",
                    input: "select",
                    options: this.getOptions('querycodeLkup/PVTYPE')
                },
                {
                    label: this.$t('outbound.picktoloc'),
                    prop: "picktoloc",
                    input: "input"
                }
            ],
            tableData: [],
            pageSize: 10,
            page: 1,
            total: 10,
            dialogFlag: false,
            tableSelectData: [],
            tableSearhData: {},
        };
    },
    computed: {
        btnConfig() {
            return [
                {label: this.$t('common.create'), certigier: this.newStatus||!this.btnPermNameList.includes('WM030401'), invalid: "newCreate"},
                {label: this.$t('common.delete'), certigier: this.deleteStatus||!this.btnPermNameList.includes('WM030402'), disabled: true, invalid: "del"},
                {type: "file", certigier: this.poiStatus||!this.btnPermNameList.includes('WM030403'), label: this.$t('common.import'), invalid: "file",importType:'10306',importUrl:"importZone",downTemplate:"handleDownTemplate"},
                // {label: this.$t('config.importTemDownload'), certigier: this.poiStatus, invalid: "downloadExcelFile"},
                {label: this.$t('common.export'), certigier: this.poiStatus||!this.btnPermNameList.includes('WM030404'), disabled: true, invalid: "exportFile"},
            ]
        }
    },
    created() {
    },
    methods: {
        async exportFile(data) {
            try {
                let res = await this.$api.post('/exportZone', data, {responseType: 'blob'})
                if (window.navigator.msSaveBlob) {
                    var blobObject = new Blob([res.data]);
                    window.navigator.msSaveBlob(blobObject, 'Zone表.xls');
                } else {
                    var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
                    var filename = 'Zone表.xls';
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                }
            } catch (e) {
                this.$message.error(e);
            } finally {
                
            }
        },
        exceptionFileUrl(exceptionUrl) {

            console.log("exceptionFileUrl = %o", 1);
            const data = [{
                exceptionFileUrl: exceptionUrl
            }];

            // 异常下载配置
            let urlConf = {responseType: 'blob'};
            let exceptionFileName = "库区信息导入模板异常文件.xls";
            let url = '/comExcelImportResult/downloadExceptionFile';
            let options = {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'};

            try {
                this.$api.post(url, data, urlConf).then(res => {
                    let blobParts = [res.data];
                    if (window.navigator.msSaveBlob) {
                        const blobObject = new Blob(blobParts);
                        window.navigator.msSaveBlob(blobObject, exceptionFileName);
                    } else {
                        let tagName = 'a';
                        const blob = new Blob(blobParts, options);
                        const downloadElement = document.createElement(tagName);
                        // 创建下载的链接
                        const href = window.URL.createObjectURL(blob);
                        downloadElement.style.display = 'none';
                        downloadElement.href = href;
                        // 下载后文件名
                        downloadElement.download = exceptionFileName;
                        document.body.appendChild(downloadElement);
                        // 点击下载
                        downloadElement.click();
                        // 下载完成移除元素
                        document.body.removeChild(downloadElement);
                        // 释放掉blob对象
                        window.URL.revokeObjectURL(href);
                    }
                    this.importVisualDialogFlag = false;
                });
            } catch (e) {
                this.$message.error(e);
            } finally {
                
            }
        },
        async downloadExcelFile(data) {
            try {
                let xls = "库区信息导入模板.xls";
                let url = "/downloadExcelFile/" + xls;
                let res = await this.$api.post(url, data, {responseType: 'blob'})
                if (window.navigator.msSaveBlob) {
                    var blobObject = new Blob([res.data]);
                    window.navigator.msSaveBlob(blobObject, xls);
                } else {
                    var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
                    var filename = '库区信息导入模板.xls';
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.style.display = 'none';
                    downloadElement.href = href;
                    downloadElement.download = filename; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                }
            } catch (e) {
                this.$message.error(e);
            } finally {
                if (data.length !== 0) {
                    
                }
            }
        },
        async newCreate() {
            this.$store.commit("setNewFlag", true)
            this.dialogFlag = true;
            setTimeout(() => {
                this.$router.push({name: 'zoneDeawer'});
            }, 0)
        },
        async del(data) {
            try {
                let res = await this.$api.post(`/deletePutawayzone`, data);
                
                    this.$message.success(this.$t('app.delMes'));
                    let page = sessionStorage.getItem('page');
                    this.getTableData(page, this.tableSearhData);
                    
                
            } catch (e) {
                this.$message.error(e);
            }
        },
        //选中的内容
        selectData(data) {
            this.tableSelectData = data;
        },
        async getTableData(page, data) {
            try {
                this.loading = true;
                let res = await this.$api.post(`/queryPutawayzone/${page}`, data);
                
                    this.tableData = res.page.list;
                    this.page = res.page.curpage;
                    this.pageSize = res.page.pageSize;
                    this.total = res.page.total;
                
            } catch (e) {
                this.$message.error(error);
            } finally {
                this.loading = false;
            }
        },
        //搜索的值
        searhData(data, up) {
            if (!up) {
                this.tableSearhData = data;
            } else {
                this.tableSearhData = data;
                this.getTableData(1, this.tableSearhData);
            }
        },
        //设置弹框
        setdialog(data) {
            this.$store.commit("setRouteData", data)
            this.dialogFlag = true;
            setTimeout(() => {
                this.$router.push({name: 'zoneDeawer'});
            }, 0)
        },
    },
    mounted() {
        
        this.$store.commit("setSkip", {});
        this.$store.commit("setNewFlag", false);
        this.$store.commit("setRouteData", "");
        this.getTableData(1, {});
    },
    watch: {
        tableSelectData(data) {
            if (this.permissionStatus) {
                if (data.length > 0) {
                    this.deleteStatus = false;
                } else {
                    this.deleteStatus = true;
                }
            }
        },
        $route(data) {
            if (data.name === "zone") {
                this.dialogFlag = false;
            }
        },
        dialogFlag(data) {
            if (data === false) {
                this.$store.commit("setNewFlag", false);
                this.getTableData(1, {});
                this.$router.push({name: "zone"});
                this.$store.commit("setSkip", {});
                this.$store.commit("setRouteData", {});
            }
        }
    },
    components: {
        "v-tableTitle": tableTitle,
        "v-table": table,
    }
};
</script>

<style scoped>
#Zone {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
